<template>
  <div class="containerbox-wrapper">
    <mds-tabs v-model="active" ref="containerboxMdsTabs" :class="{'not-show': !showTabTitle}">
      <mds-tabs-pane tab="模版页" :index="1">
        <div class="containerbox-tab_item">
          <slot name="container" />
        </div>
      </mds-tabs-pane>
      <!-- <mds-tabs-pane tab="设计说明" :index="2">
        <div class="containerbox-tab_item">
          <slot name="info" />
        </div>
      </mds-tabs-pane> -->
    </mds-tabs>
  </div>
</template>

<script>
export default {
  name: 'ContainerBox',
  props: {
    metaTitle: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      active: 1,
      showTabTitle: false
    }
  },
  mounted() {
    this.changeTabTitle()
    setTimeout(() => {
      this.showTabTitle = true
    }, 300)
  },
  methods: {
    changeTabTitle() {
      try {
        this.$refs['containerboxMdsTabs'].$children[0].$el.setAttribute('data-star', this.metaTitle)
      // eslint-disable-next-line no-empty
      } catch {}
    }
  }
}
</script>

<style lang="scss">
.containerbox-wrapper {
  .not-show .mds-tabs-nav-container {
    opacity: 0 !important;
  }
  .mds-tabs {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    .mds-tabs-bar {
      position: relative;
      width: 100%;
      flex-shrink: 0;
      background-color: #fff;
      padding: 0 26px 8px 24px;
      margin: 0;
      display: flex;
      justify-content: flex-end;
      border: none;
      &::after {
        content: attr(data-star);
        position: absolute;
        top: 40%;
        left: 24px;
        transform: translateY(-50%);
        font-size: 20px;
        font-weight: bold;
        font-family:PingFangSC-Medium,PingFang SC;
        color: #354052;
        line-height: 28px;
      }
    }
    .mds-tabs-content {
      width: 100%;
      // flex: 1;
      // overflow: hidden;
      height: calc(100% - 43px);
      background-color: #F0F2F5;
      .mds-tabs-tabpane {
        box-sizing: border-box;
        padding: 21px 24px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.containerbox-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
   .containerbox-tab_item {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: #fff;
    border-radius: 4px;
    overflow: auto;
  }
}
</style>
